<template>
	<view class="flex-1 hb hidden column">
		<view class="search">
			<u-search placeholder="请输入关键词搜索" bgColor="#F2F2F2" :showAction="false" shape="square" v-model="keywords"
				height="73rpx" :customStyle="{borderRadius: '20rpx', overflow:'hidden'}"></u-search>
		</view>
		<view class="pt27 pl32 pb5" @click="onSelectAddr">
			<text class="choose">全国</text>
		</view>
		<view class="flex-1 hb column scrolly">
			<u-index-list :index-list="indexList">
				<template v-for="(item, index) in itemArr" :key="index">
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor :text="indexList[index]" bgColor="#f3f7fa" @click="onSelectAddr(item)"></u-index-anchor>
					<!-- #endif -->
					<u-index-item>
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="indexList[index]" bgColor="#f3f7fa"></u-index-anchor>
						<!-- #endif -->
						<view class="list-cell" v-for="(cell, index) in item" :key="cell.id" @click="onSelectAddr(cell)">
							{{ cell.name }}
						</view>
					</u-index-item>
				</template>
			</u-index-list>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from 'vue';
	import {
		getArea
	} from "@/api/home/index";
	import storage from "@/utils/storage";
	import {
		navBack
	} from "@/core/app";
	import {
		useStore
	} from "vuex"

	/* 初始化缓存 */
	const store = useStore()

	const keywords = ref('')
	// 创建响应式数据
	const indexList = ref([]);
	const itemArr = ref([]);
	const brandOpt = ref(null)
	onLoad((option) => {
		option.brand && (brandOpt.value = option.brand)
		getAreaList()
	})
	const getAreaList = async () => {
		let res = await getArea()
		if (res) {
			indexList.value = Object.keys(res.data)
			itemArr.value = Object.values(res.data);
		}
	}

	function onSelectAddr(item) {
		if (!item) {
			store.commit('SET_ADDRESS', {
				province_id: '',
				province_name: '全国',
			})
		} else {
			storage.set("xunche-provice", {
				province_id: item.id,
				province_name: item.name
			})
		}
		if (brandOpt.value) {
			uni.$emit('changeCity', {
				brand: JSON.stringify(item)
			});
		}
		navBack()
	}
</script>

<style scoped lang="scss">
	.search {
		width: 750rpx;
		height: 135rpx;
		background: #ffffff;
		padding: 36rpx 30rpx 26rpx;
		box-sizing: border-box;
		background: #ffffff;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.choose {
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
	}

	:deep(.u-border-bottom) {
		border-bottom: #ffffff;
	}
</style>